<template>
  <div class="article">
    <!--    文章查询表单-->
    <div class="search">
      <div class="title">文章列表</div>
      <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline" size="mini"
               ref="search">
        <el-form-item label='案例id' prop="case_id">
          <el-input v-model.number="searchForm.case_id" placeholder="请填入数字"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}" clearable></el-input>
        </el-form-item>
        <el-form-item label='文章标题' prop="case_title">
          <el-input v-model="searchForm.case_title" clearable></el-input>
        </el-form-item>
        <el-form-item label="首页显示" prop="case_status">
          <el-select v-model="searchForm.case_status" >
            <el-option label="全部" value=""></el-option>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='内容(模糊查询)' prop="case_content">
          <el-input v-model="searchForm.case_content" clearable></el-input>
        </el-form-item>

<!--        <el-form-item label="文章分类" prop="articleCategory">-->
<!--          <el-select v-model="searchForm.articleCategory" >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="成功案例" value="成功案例"></el-option>-->
<!--            <el-option label="优质机构" value="优质机构"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="服务类型" prop="serviceType">-->
<!--          <el-select v-model="searchForm.serviceType" >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="公司服务" value="公司服务"></el-option>-->
<!--            <el-option label="法律文书" value="法律文书"></el-option>-->
<!--            <el-option label="知识产权" value="知识产权"></el-option>-->
<!--            <el-option label="资质证照" value="资质证照"></el-option>-->
<!--            <el-option label="法律咨询" value="法律咨询"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="地区" prop="area">-->
<!--          <el-select v-model="searchForm.area" >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="北京" value="北京"></el-option>-->
<!--            <el-option label="山东" value="山东"></el-option>-->
<!--            <el-option label="武汉" value="武汉"></el-option>-->
<!--            <el-option label="上海" value="上海"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="审批情况" prop="isApprove">-->
<!--          <el-select v-model="searchForm.isApprove" >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="待审批" value="待审批"></el-option>-->
<!--            <el-option label="审批通过" value="审批通过"></el-option>-->
<!--            <el-option label="审批拒绝" value="审批拒绝"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    新增文章按钮-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="showAddDialog" size="mini">新增</el-button>
      </el-col>
    </el-row>

    <!--   文章列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="case_id"
        label="案例id">
      </el-table-column>
      <el-table-column
        prop="case_title"
        label="文章标题">
      </el-table-column>
      <el-table-column
        width="520"
        prop="case_content"
        label="文章内容">
      </el-table-column>
      <el-table-column
        prop="case_status"
        label="首页显示">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.case_status">是</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="articleCategory"-->
<!--        label="文章分类">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="serviceType"-->
<!--        label="服务类型">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="area"-->
<!--        label="地区">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="isApprove"-->
<!--        label="审批状况">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="publisher"-->
<!--        label="发布人">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        width="100px"-->
<!--        prop="creatTime"-->
<!--        label="发布时间"-->
<!--        sortable>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateArticleClick(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteArticle(scope.row)">删除</el-button>
<!--          <el-button type="primary" size="mini">审核</el-button>-->
          <el-button type="primary" size="mini" @click="toggleArticleShow(scope.row)">{{scope.row.case_status==1 ? "下架" : "上线"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--    增加文章对话框-->
    <el-dialog title="添加文章" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"
               :close-on-click-modal="false">
      <el-form :model="addArticleForm" :rules="addArticleRules" ref="addArticleRef" label-width="80px">
        <el-form-item label="文章标题" prop="case_title">
          <el-input v-model="addArticleForm.case_title" clearable></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="case_content">
          <el-input v-model="addArticleForm.case_content" clearable></el-input>
        </el-form-item>
        <el-form-item label="首页显示" prop="case_status">
          <el-select v-model="addArticleForm.case_status" >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddArticle">添加文章</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<!--    编辑文章对话框-->
    <el-dialog title="编辑文章信息" :visible.sync="updateDialogVisible" width="50%" @close="closeUpdateDialog"
               :close-on-click-modal="false">
      <el-form :model="updateArticleForm" :rules="updateArticleRules" ref="updateArticleRef" label-width="80px">
        <el-form-item label="文章id" prop="case_id">
          <el-input v-model="updateArticleForm.case_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="case_title">
          <el-input v-model="updateArticleForm.case_title" clearable></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="case_content">
          <el-input v-model="updateArticleForm.case_content" clearable></el-input>
        </el-form-item>
        <el-form-item label="首页显示" prop="case_status">
          <el-select v-model="updateArticleForm.case_status" >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onUpdateArticle">编辑文章</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getCaseByKey,updateCaseStatus,deleteCase,addCase,updateCase} from '@/network/portal/article'
export default {
  name: "Article",
  computed: {
    total() { //总条数
      return this.tableData.length;
    }
  },
  created() {
    this.getArticleFromServe();
  },
  data() {
    return {
      addDialogVisible: false,  //增加文章对话框的开关
      updateDialogVisible: false,  //编辑文章对话框的开关
      currentPage: 1,  //当前页面
      pageSize: 5,  //页面条数，默认为10条
      searchForm: {  //查询文章表单
        case_id: '',  //案例id
        case_title: '',  //文章标题/机构名称
        case_content: '',  //文章内容
        case_status: ''  //全部显示
        // articleCategory:'', //文章分类
        // serviceType:'',  //服务类型
        // area:'',  //地区
        // isApprove:'',  //是否审批通过
      },
      addArticleForm: {  //添加文章表单
        case_title: '',  //文章标题/机构名称
        case_content: '',  //文章内容
        case_status: 1 //显示
      },
      addArticleRules: { //添加文章规则
        case_title: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
        case_content: [{required: true, message: '请输入文章内容', trigger: 'blur'},],
      },
      updateArticleForm: {  //编辑文章表单
        case_id: '',  //案例id
        case_title: '',  //文章标题/机构名称
        case_content: '',  //文章内容
        case_status: 1 //全部显示
      },
      updateArticleRules: { //编辑文章规则
        case_title: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
        case_content: [{required: true, message: '请输入文章内容', trigger: 'blur'},],
      },

      showTableData: [],  //真正展示的列表
      tableData: [],
      // tableData:[
      //   {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'上海',  //地区
      //     isShow:'否', //是否显示在首页
      //     isApprove:'审批通过',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'优质机构', //文章分类
      //     serviceType:'资质证照',  //服务类型
      //     area:'武汉',  //地区
      //     isShow:'否', //是否显示在首页
      //     isApprove:'审批拒绝',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }, {
      //     title:'xxxxx',  //文章标题/机构名称
      //     articleCategory:'成功案例', //文章分类
      //     serviceType:'公司服务',  //服务类型
      //     area:'北京',  //地区
      //     isShow:'是', //是否显示在首页
      //     isApprove:'待审批',  //是否审批通过
      //     content:'xxxxxxxx....',  //文章内容
      //     publisher: '管理员1',  //发布人
      //     creatTime:'2019-09-01'
      //   }
      // ]
    }
  },
  methods: {
    //从数据库中查询文章
    getArticleFromServe() {
      getCaseByKey(this.searchForm).then(res => {
        if (res.status == 200) {
          this.tableData = res.data;
          this.currentPage = 1;
          this.getTableData();
        } else {
          this.$message.error("请求文章失败！");
        }
      })
    },
    //切换文章的显示状态
    toggleArticleShow(article) {
      updateCaseStatus(article.case_id).then(res => {
        if (res.data.status == 200) {
          article.case_status = article.case_status == 1 ? 0 : 1;
          if (article.case_status == 1) {
            this.$message.success(`"${article.case_title}"成功案例上线成功！`);
          } else {
            this.$message.success(`"${article.case_title}"成功案例下架成功！`);
          }
        } else {
          this.$message.error(`”${article.case_title}“成功案例状态修改失败！`);
        }
      })
    },
    //删除文章
    deleteArticle(article) {
      this.$confirm(`"${article.case_title}"成功案例会被永久删除,是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCase(article.case_id).then(res => {
          if (res.data.status == 200) {
            this.$message.success(`”${article.case_title}“成功案例删除成功！`);
            this.getArticleFromServe();
          }
          if (res.data.status == 500) {
            this.$message.error(`“${article.case_title}”成功案例删除失败！`)
          }
        })
      }).catch(() => {
        return this.$message('已取消删除！');
      })
    },
    //添加文章
    onAddArticle() {
      this.$refs.addArticleRef.validate(valid => {
        if (valid) {
          addCase(this.addArticleForm).then(res => {
            if (res.status == 200) {
              this.$message.success("添加文章成功！");
              this.$refs.addArticleRef.resetFields();  //将添加表单的数据清空

              this.addDialogVisible = false;
              this.getArticleFromServe();
            }
            if (res.status == 500) {
              this.$message.error("添加文章员失败，请重新添加！");
            }
          })
        } else {
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    },

    resetForm(formName) {    //重置查询表单
      this.$refs[formName].resetFields();
      this.getArticleFromServe();
    },
    onSubmit() {  //查询
      this.getArticleFromServe();
    },

    showAddDialog() { //点击添加按钮
      this.addDialogVisible = true;
    },
    addDialogClosed() {  //关闭“添加合同”对话框
      this.addDialogVisible = false;
    },

    updateArticleClick(article) {  //点击 编辑文章 按钮
      this.updateArticleForm = article;
      this.updateDialogVisible = true;
    },
    closeUpdateDialog() {  //关闭编辑文章对话框
      this.updateDialogVisible = false;
      this.$refs.updateArticleRef.resetFields();
    },
    onUpdateArticle() {  //编辑文章
      this.$refs.updateArticleRef.validate(valid => {
        if (valid) {
          updateCase(this.updateArticleForm).then(res => {
            if (res.data.status == 200) {
              this.$message.success('编辑文章成功！');
              this.$refs.updateArticleRef.resetFields();  //将编辑表单的数据清空
              this.updateDialogVisible = false;
              this.getArticleFromServe();
            }
            if (res.data.status == 500) {
              this.$message.error("编辑文章失败，请重新添加！");
            }
          })
        } else {
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    },
    //分页
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
